<template>
  <div class="search">
    <!-- 顶部搜索框 -->
    <div class="souuo">
      <form action="/">
        <van-search shape="round" v-model="value" show-action placeholder="搜索中酒网商品/店铺" @search="onSearch"
          @cancel="onCancel" />
      </form>
    </div>
    <!-- 顶部搜索框 End-->
    <!-- 历史记录 -->
    <div class="history" v-if="state == 1">
      <div class="top">
        <span>历史搜索</span>
        <span>
          <svg viewBox="0 0 1024 1024" width="16px" height="16px" style="display: block;">
            <path
              d="M809.54718375 140.66431727H216.07639088c-54.63330012 0-98.91630823 13.29978598-98.91630824 55.53979485v25.49012876h791.28987929v-25.49012876c0.01353005-42.24001007-44.26947923-55.53979605-98.90277818-55.53979485"
              fill="#bbb"></path>
            <path
              d="M720.26408644 194.71583568L700.97060331 56.76607767c-3.74775182-26.95134508-29.06199341-48.96431717-56.27040482-48.96431718H380.93690619c-27.20841139 0-52.50912292 22.01297091-56.31099377 49.00490616l-19.29348432 137.96328805c-3.76128188 26.95134508 15.42396316 21.91826289 42.63237454 21.91826291h329.69396934c27.22194142-0.0270601 46.40718649 5.01955334 42.60531446-21.97238193z m-352.5728472-27.97961033l15.23454597-109.02306278h259.77200422l15.23454593 109.02306278H367.69123924zM826.03999995 283.36303226H199.59710474c-36.2598418 0-63.26530708 29.56259479-59.99109771 65.67360951l54.02445951 593.95786536c3.2606793 36.12454478 35.65100116 65.67360952 71.89731403 65.67360953h494.54095456c36.2598418 0 68.65016359-29.56259479 71.89731407-65.67360953l54.02445828-593.95786536c3.31479955-36.12454478-23.70419583-65.67360952-59.95050753-65.67360951zM380.93690619 939.90971378h-128.08654091L210.15034282 359.81988606h170.77303333V939.90971378z m216.88256336 0H426.96525827V359.81988606h170.85421128V939.90971378z m173.69546955 0h-126.81474061V359.81988606h169.08180961L771.5149391 939.90971378z"
              fill="#bbb"></path>
          </svg>
        </span>
      </div>
      <div class="buttom">
        <div class="items">
          <div class="item"  v-for="item, index in historyGoods" :key="index" @click="hisSearch(item)">{{ item }}</div>
        </div>
      </div>
    </div>
    <!-- 历史记录 End-->
    <!-- 搜索结果 -->
    <div class="jieguo" v-else>
      <van-tabs v-model="active">
        <van-tab title="商品" class="shangping">
          <!-- 顶部分类 -->
          <div class="fenle">
            <div class="items">
              <div class="item" v-for="item,index in fenleiList" @click="activeKey(index)" :key="index">{{ item }}</div>
              <div class="item">
                <svg viewBox="0 0 1024 1024" width="16px" height="16px" style="display: block;">
                  <path
                    d="M66.740542 943.977455l371.132692 0L437.873234 572.84374 66.740542 572.84374 66.740542 943.977455zM116.2307 622.333898l272.175913 0 0 272.151353L116.2307 894.485251 116.2307 622.333898zM536.854573 869.740684l420.623873 0 0-49.490158L536.854573 820.250526 536.854573 869.740684zM66.740542 449.117834l371.132692 0L437.873234 77.984119 66.740542 77.984119 66.740542 449.117834zM116.2307 127.4753l272.175913 0 0 272.151353L116.2307 399.626653 116.2307 127.4753zM536.854573 152.22089l0 49.491181 420.623873 0 0-49.491181L536.854573 152.22089zM536.854573 696.547133l420.623873 0 0-49.466622L536.854573 647.080511 536.854573 696.547133zM536.854573 374.881063l420.623873 0 0-49.467645L536.854573 325.413418 536.854573 374.881063z"
                    fill="#333333"></path>
                </svg>
              </div>
            </div>
          </div>
          <!-- 顶部分类 End-->
          <!-- 商品列表 -->
          <div class="goodsList" v-if="goodsData.length">
            <div class="items">
              <div class="item" v-for="item, index in goodsData" :key="index">
                <router-link :to="{name:'detail',params:{id:item.ProductId}}">
                  <div class="item1">
                    <div class="img"><img :src="item.ProductDefaultImage" alt=""></div>
               <div class="text">
                  <div class="name">{{ item.ProductName }}</div>
                  <div class="ziying">{{ item.ShopName }}</div>
                  <div class="price">￥{{ item.SalePrice }}</div>
                  <div class="button">
                    <span>
                      <img src="@/assets/img/search/chnegjiao.png" alt="">
                      成交{{ item.SaleCounts }}笔</span>
                    <span>河南郑州奇酷</span>
                  </div>
               </div>
                  </div>
                 
                </router-link>
               
              </div>
            </div>
          </div>
          <!-- 商品列表 End-->
        </van-tab>
        <van-tab title="店铺" class="dianpu">
          <div class="img"><img src="@/assets/img/search/dianou.png" alt=""></div>
          <div class="text">
            <p>未搜索到相关商品</p>
            <p>请换个关键字试试</p>
          </div>
        </van-tab>

      </van-tabs>
    </div>
    <!-- 搜索结果 End-->
  </div>
</template>
<script>

export default {
  data() {
    return {
      value: '',
      state:1,
      historyGoods: JSON.parse(localStorage.getItem("historyGoods")) || [],
      active: 0,
      goodsData: [],
      fenleiList:['综合','距离','销量','价格']
    };
  },
  created() {

  },
  methods: {
    hisSearch(item){
      console.log(item);
      this.onSearch(item) 
    },
    onSearch(val) {

      if (val.length > 0) {
        this.value = val

        this.historyGoods = this.historyGoods.filter(item => {
          return item != this.value
        })
        this.historyGoods.unshift(this.value)
        localStorage.setItem("historyGoods", JSON.stringify(this.historyGoods))

        // 跳转到state2并请求服务器
        this.state = 2
        this.$apiProxy({
          url: '/MiniOfficial/Search/Product',
          method: 'post',
          data: {
            a_id: null,
            accountset: null,
            exp_keywords: null,
            expires: 1669344146181,
            firstkey: this.value,
            firsttype: 1,
            keywords: this.value,
            lng_lat: '112.45404,34.619682',
            orderKey:1,
            orderType: 2,
            pageNo: 1,
            pageSize: 10,
            provinceandcity: '河南省,洛阳市',
            sign: '328dd964e6e0cf4b766c047e9c351ff6',
            t: 0

          }
        }).then(res => {
          console.log(res);
         if(res.code==0){
          this.goodsData=res.data.data.Data
         }
        })
      }
    },
    onCancel() {
      this.value = ''
      this.state=1
      // Toast('取消');
    },
    activeKey(index){
      console.log('点击了',index);
      this.$apiProxy({
          url: '/MiniOfficial/Search/Product',
          method: 'post',
          data: {
            a_id: null,
            accountset: null,
            exp_keywords: null,
            expires: 1669344146181,
            firstkey: this.value,
            firsttype: 1,
            keywords: this.value,
            lng_lat: '112.45404,34.619682',
            orderKey:index,
            orderType: 2,
            pageNo: 1,
            pageSize: 10,
            provinceandcity: '河南省,洛阳市',
            sign: '328dd964e6e0cf4b766c047e9c351ff6',
            t: 0

          }
        }).then(res => {
          console.log(res);
         if(res.code==0){
          this.goodsData=res.data.data.Data
         }
        })

    }
  },
};
</script>
<style lang="less">
.search {

  .history {
    .top {
      display: flex;
      justify-content: space-between;
      padding: 12px;
      font-size: 16px;
    }

    .buttom {
      .items {
        display: flex;
        flex-wrap: wrap;
        // background-color: pink;
        justify-content: flex-start;

        .item {
          padding: 0px 10px;
          margin: 10px;
          height: 30px;
          line-height: 30px;
          border-radius: 50px;
          background-color: #f6f6f6;
          color: #1f1f1f;
          font-size: 16px;
        }
      }
    }
  }

  .jieguo {
    .dianpu {
      background-color: rgb(246, 246, 246);
      position: fixed;
      bottom: 0px;
      height: 85%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .img {
        width: 100px;
        height: 100px;
      }

      .text {
        p {
          font-size: 16px;
          color: #bbb;
        }
      }
    }

    .shangping {
      .fenle {
        .items {
          margin: 10px 0;
          display: flex;
          justify-content: space-evenly;

          align-items: center;

          .item {
            font-size: 16px;
          }
        }
      }
      .goodsList{
        .items{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          .item{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #959595;
            .item1{
              width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px;
           
              .img{
              width: 90px;
              height: 90px;
              img{
                width: 100%;
              }
              margin: 10px;
            }
            .text{
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-evenly;
              font-size: 16px;
              width: 80%;
              .name{
                text-align: left;
              }
              .ziying{
                color: #959595;
              }
              .price{
                font-size: 20px;
                color: red;
              } 
              .button{
                display: flex;
                color: #959595;
                justify-content: space-between;
                width: 100%;
                align-items: center;
                img{
                  width: 16px;
                  height: 16px;
                }
               
              }
            }
            }
           
          }
        }
      }
    }
  }
}
</style>
